<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="renderer" content="webkit" />
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="format-detection" content="telphone=no, email=no" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <title>AKjs移动端框架</title>
  <link rel="stylesheet" type="text/css" href="../css/akjs.mobile.min.css" /><!--AKjs公共样式库引入-->
  <link rel="stylesheet" type="text/css" href="../css/style.css" /><!--布局相关样式-->
  <link rel="stylesheet" type="text/css" href="../css/theme.default.css" /><!--颜色相关样式-->
  <script type="text/javascript" language="javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" src="../js/akjs.mobile.min.js"></script><!--AKjs引入-->
</head>
<body>

<!----------AKjs_PopupWin---------->
<header class="press bor_bottom bor_gray_ddd bg_gray_f9f dis_block">
  <button type="button" class="left_0 w_25 pl_3 text_al_l fs_12rem" data-href="javascript:history.back();"><i class="fs_14rem icon-ln_fanhui_b"></i>返回</button>
  <h1 class="text_al_c">聊天展示</h1>
  <button type="button" class="right_0 w_25 pr_3 text_al_r fs_12rem" id="plug_MyMenu"><i class="fs_14rem icon-mn_wo"></i></button>
</header>

<main>

  <!--main元素里面必须有id="ak-main"才能正常运行，当前元素是内容区域的容器。-->
  <div id="ak-main" class="defer_fadein_05">
    <scrollview id="ak-scrollview">
      <div class="wp_94 mb_5 ovh defer_15 plug_chatView">
      <ul>
        <li class="ovh mt_1rem">
          <dl class="ak-chat_left">
            <dt>
              <figure class="wh_3rem bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="../img/tibet-1.jpg" class="defer_none"></figure>
              <span class="center fs_08rem c_gray_777 text_al_c">KIM</span>
            </dt>
            <dd>您好，我想要咨询一下一个问题。</dd>
          </dl>
        </li>
        <li class="ovh mt_1rem">
          <time class="defer_1">13:35</time>
        </li>
        <li class="ovh mt_1rem">
          <dl class="ak-chat_right">
            <dt>
              <figure class="wh_3rem bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="../img/tibet-2.jpg" class="defer_none"></figure>
              <span class="center fs_08rem c_gray_777 text_al_c">安德鲁</span>
            </dt>
            <dd class="border bg_theme bor_theme c_white">好，您请说</dd>
          </dl>
        </li>
        <li class="ovh mt_1rem">
          <dl class="ak-chat_left">
            <dt>
              <figure class="wh_3rem bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="../img/tibet-1.jpg" class="defer_none"></figure>
              <span class="center fs_08rem c_gray_777 text_al_c">KIM</span>
            </dt>
            <dd>AKjs移动端插件是依赖于jquery插件的吗？</dd>
          </dl>
        </li>
        <li class="ovh mt_1rem">
          <dl class="ak-chat_right">
            <dt>
              <figure class="wh_3rem bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="../img/tibet-2.jpg" class="defer_none"></figure>
              <span class="center fs_08rem c_gray_777 text_al_c">安德鲁</span>
            </dt>
            <dd class="border bg_theme bor_theme c_white">是的，必须引入jquery插件才能正常运行。</dd>
          </dl>
        </li>
        <li class="ovh mt_1rem">
          <dl class="ak-chat_left">
            <dt>
              <figure class="wh_3rem bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="../img/tibet-1.jpg" class="defer_none"></figure>
              <span class="center fs_08rem c_gray_777 text_al_c">KIM</span>
            </dt>
            <dd>好的。明白了</dd>
          </dl>
        </li>
      </ul>
    </div>
    </scrollview>
  </div>
  <!--ak-main End-->

  <!----------AKjs_PopupWin Start---------->
  <dialog id="plug_MyMenuWin" class="dis_none ovh left_au right_0 w_30 mr_05rem mt_32rem"> <!--顶部位置显示的弹窗-->
    <i class="pos_abs right_0 top_0 dis_block minus_mt_01rem mr_02rem icon-ln_jiantoushang fs_18rem c_white"></i>
    <ul class="pos_rel ovh z_index_2 bg_white mt_08rem list_h_3rem bor_rad_03rem">
      <li class="pl_1rem c_gray_777 bor_bottom bor_gray_ddd active_theme" data-href="demo.html">信息菜单A</li>
      <li class="pl_1rem c_gray_777 bor_bottom bor_gray_ddd active_theme" data-href="demo.html">信息菜单B</li>
      <li class="pl_1rem c_gray_777 bor_bottom bor_gray_ddd active_theme" data-href="demo.html">信息菜单C</li>
    </ul>
  </dialog>

  <dialog id="plug_locationWin" class="dis_none w_100 bg_gray_eee"> <!--发送位置弹窗-->
    <ul class="bg_white ovh list_h_36rem mb_2">
      <li class="bor_bottom bor_gray_ddd touchstart">
        <button type="button" class="dis_block ovh w_100 text_al_c line_h_36rem" id="plug_map">发送位置</button>
      </li>
      <li class="bor_bottom bor_gray_ddd touchstart">
        <button type="button" class="dis_block ovh w_100 text_al_c line_h_36rem" id="plug_livemap">共享实时位置</button>
      </li>
    </ul>
    <button type="button" class="plug_closeIn w_100 h_32rem fs_12rem bg_white c_theme">取消</button>
  </dialog>

  <dialog id="plug_mapWin" class="dis_none pos_fix wh_100 bg_white"> <!--显示地图弹窗-->
    <button type="button" class="plug_back pos_fix left_0 top_0 ml_1rem mt_1rem wh_28rem text_al_c z_index_8 bg_theme05 bor_rad_50">
      <i class="fs_14rem icon-ln_zhixiangzuo c_white"></i>
    </button>
    <div id="plug_allmap" class="h_in"></div>
  </dialog>
  <!----------AKjs_PopupWin End---------->

</main>

<footer class="press bg_gray_f9f dis_block">
  <menu>
    <form action="#" method="get" data-submit="false">
      <div class="wp_94 bg_gray_f5fg bor_top bor_gray_ddd pt_03rem pb_03rem plug_chat">
        <input type="text" class="fl bg_white w_85 h_24rem line_h_100 pl_05rem c_gray_777 border bor_gray_ddd bor_rad_05rem" placeholder="请输入文字,已开启实时聊天功能" value="" />
        <button class="fr wh_24rem bor_rad_50 bg_white border bor_gray_ddd" type="button">
          <i class="font_bold c_gray_777 fs_14rem icon-ln_jia_b"></i>
        </button>
      </div>
    </form>
    <fieldset class="wp_94 bg_gray_f5fg bor_top bor_gray_ddd dis_none plug_chatOption">
      <ul class="length4 pos_rel ovh">
        <li class="fl ovh mt_1rem">
          <label class="dis_block fn pos_rel ovh center text_al_c wh_4rem bor_rad_05rem bg_white border bor_gray_ddd active_gray_f1f">
            <i class="line_h_4rem c_gray_777 fs_2rem icon-mn_tupian_fill"></i>
            <input type="file" accept="image/*" class="pos_abs w_100 left_0" />
          </label>
          <p class="text_al_c fs_09rem c_gray_777 line_h_24rem">照片</p>
        </li>
        <li class="fl ovh mt_1rem">
          <label class="dis_block fn pos_rel ovh center text_al_c wh_4rem bor_rad_05rem bg_white border bor_gray_ddd active_gray_f1f">
            <i class="line_h_4rem c_gray_777 fs_2rem icon-mn_xiangji_fill"></i>
            <input type="file" accept="video/*" capture="camcorder" class="pos_abs w_100 left_0" />
          </label>
          <p class="text_al_c fs_09rem c_gray_777 line_h_24rem">拍摄</p>
        </li>
        <li class="fl ovh mt_1rem">
          <label class="dis_block fn pos_rel ovh center text_al_c wh_4rem bor_rad_05rem bg_white border bor_gray_ddd active_gray_f1f">
            <i class="line_h_4rem c_gray_777 fs_2rem icon-mn_hongbao_fill"></i>
          </label>
          <p class="text_al_c fs_09rem c_gray_777 line_h_24rem">红包</p>
        </li>
        <li class="fl ovh mt_1rem">
          <label class="dis_block fn pos_rel ovh center text_al_c wh_4rem bor_rad_05rem bg_white border bor_gray_ddd active_gray_f1f" id="plug_location">
            <i class="line_h_4rem c_gray_777 fs_2rem icon-mn_weizhi_fill"></i>
          </label>
          <p class="text_al_c fs_09rem c_gray_777 line_h_24rem">位置</p>
        </li>
      </ul>
    </fieldset>
  </menu>
</footer>

</body>
<script type="text/javascript">
    //引入AKjs功能插件的区域

    if (window.location.protocol == "file:") {
        alert("AKjs仅支持http或https协议访问！不支持直接打开本地文件的方式访问！通过本地配置服务器访问或者使用WebStorm软件打开访问即可！");
        throw new Error();
    }

    /*-----------------------------------------------AKjs_Include & AKjs_Plugin 插件按需引入区域-------------------------------------------*/
    AKjs_Include("js/common.js"); //功能插件按需引入（为了正常运行功能插件通过AKjs_Include方式引入）

    /*-----------------------------------------------AKjs_Popupwin 使用方法-------------------------------------------*/
    $(function() {
        $("#plug_MyMenu").bind("click", function (aa) {
            AKjs_Popupwin({
                dom: "#plug_MyMenuWin", //弹窗内容的布局
                position: "top", //位置类型(top，bottom，left，right，middle)
                effectIn: "slideDown ani_05s", //弹窗显示效果 (css动画库：akjs.animate.css)
                effectOut: "slideUp ani_05s", //弹窗消失效果 (css动画库：akjs.animate.css)
                hasMask: true, //是否开启遮罩层背景 (true / false)
                maskPosition: 5, //Mask的z-index数值
                closeBtn: "#popup_mask", //关闭弹窗按钮的Class名
                OneButton: aa.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                toggleIcon: "fs_14rem icon-mn_wo", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                callback:function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                    if (toggle) { //判断是否弹出弹窗
                        console.log($(ele[0].dom)); //获取当前的弹窗元素
                        $("footer").addClass("z_index_0");
                    } else {
                        setTimeout(function() {
                            $("footer").removeClass("z_index_0");
                        },1000);
                    }
                }
            });
        });
    });

    /*-----------------------------------------------AKjs_MobileChat 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_chat").AKjs_MobileChat({
            chat_view: ".plug_chatView", //聊天内容展示区域dom
            chat_optDom: ".plug_chatOption", //更多功能区域dom
            chat_optHeight: "8rem", //更多功能选项的高度
            callback: function(ele,container,scrollHeight) { //初始化回调入口

            },
            chatcallback: function(ele,val) { //实时输入的回调入口
                console.log(val)
            },
            btncallback: function(str,container,scrollHeight) { //聊天内容提交后的回调（输入内容，聊天内容生成区域，聊天内容区域实时的高度）

                var chat_portrait_me = "../img/tibet-2.jpg"; //您的头像图片地址
                var chat_name_me = "安德鲁"; //您的聊天名称
                var chat_portrait_you = "../img/tibet-1.jpg"; //对方的头像图片地址
                var chat_name_you = "KIM"; //对方的聊天名称
                var chat_auto = "很高兴认识你！我是自动回复机器人！"; //对方的自动回复消息

                //您的聊天元素设置
                var chat_view_me = "<li class=\"ovh mt_1rem\">\n" +
                    "            <dl class=\"ak-chat_right\">\n" +
                    "                <dt>\n" +
                    "                    <figure class=\"wh_3rem bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto\"><img src="+chat_portrait_me+" class=\"defer_none\"></figure>\n" +
                    "                    <span class=\"center fs_08rem c_gray_777 text_al_c\">"+chat_name_me+"</span>\n" +
                    "                </dt>\n" +
                    "                <dd class=\"border bg_theme bor_theme c_white\">"+str+"</dd>\n" +
                    "            </dl>\n" +
                    "        </li>";

                //对方的聊天元素设置
                var chat_view_you = "<li class=\"ovh mt_1rem\">\n" +
                    "            <dl class=\"ak-chat_left\">\n" +
                    "                <dt>\n" +
                    "                    <figure class=\"wh_3rem bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto\"><img src="+chat_portrait_you+" class=\"defer_none\"></figure>\n" +
                    "                    <span class=\"center fs_08rem c_gray_777 text_al_c\">"+chat_name_you+"</span>\n" +
                    "                </dt>\n" +
                    "                <dd>"+chat_auto+"</dd>\n" +
                    "            </dl>\n" +
                    "        </li>";
                $(chat_view_me).appendTo(container); //生成您的聊天元素
                $("#ak-scrollview").scrollTop(scrollHeight); //发送消息后让滚动调自动滚到最底部

                setTimeout(function() { //对方的聊天内容延迟执行
                    $(chat_view_you).appendTo(container); //生成对方的聊天元素
                    $("#ak-scrollview").scrollTop(scrollHeight); //发送消息后让滚动调自动滚到最底部
                },100);
            },
            optcallback: function(ele,toggle) { //更多功能展示和隐藏的回调入口
                ele.find("#plug_location").unbind("click");
                if (toggle) {
                    ele.find("#plug_location").bind("click", function (bb) {
                        AKjs_Popupwin({
                            dom: "#plug_locationWin", //弹窗内容的布局
                            position: "bottom", //位置类型(top，bottom，left，right，middle)
                            effectIn: "slideInUp ani_01s", //弹窗显示效果 (css动画库：akjs.animate.css)
                            effectOut: "slideOutDown ani_01s", //弹窗消失效果 (css动画库：akjs.animate.css)
                            hasMask: true, //是否开启遮罩层背景 (true / false)
                            maskPosition: 8, //Mask的z-index数值
                            closeBtn: ".plug_closeIn", //关闭弹窗按钮的Class名
                            OneButton: bb.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                            toggleIcon: "", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                            callback :function (ele1,toggle1) { //通过回调获取弹窗显示后的以上参数
                                //console.log($(ele1[0].dom)); //获取当前的弹窗元素
                                $(ele1[0].dom).find("#plug_map").unbind("click");
                                $(ele1[0].dom).find("#plug_livemap").unbind("click");
                                var jsurl = 'https://webapi.amap.com/maps?v=1.4.8&key=608d75903d29ad471362f8c58c550daf'; //通过ajax引入高德地图API
                                AKjs_Ajax({
                                    type:'GET',
                                    url: jsurl,
                                    async: true,
                                    cache: true,
                                    dataType:'script'
                                });
                                if (toggle1) {
                                    //发送位置
                                    $(ele1[0].dom).find("#plug_map").bind("click", function (cc) {
                                        AKjs_Popupwin({
                                            dom: "#plug_mapWin", //弹窗内容的布局
                                            position: "bottom", //位置类型(top，bottom，left，right，middle)
                                            effectIn: "slideInUp ani_05s", //弹窗显示效果 (css动画库：akjs.animate.css)
                                            effectOut: "slideOutDown ani_05s", //弹窗消失效果 (css动画库：akjs.animate.css)
                                            hasMask: true, //是否开启遮罩层背景 (true / false)
                                            maskPosition: 8, //Mask的z-index数值
                                            closeBtn: ".plug_back", //关闭弹窗按钮的Class名
                                            OneButton: cc.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                                            toggleIcon: "", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                                            callback :function (ele2,toggle2) { //通过回调获取弹窗显示后的以上参数
                                                //console.log($(ele2[0].dom)); //获取当前的弹窗元素
                                                $(ele1[0].dom).removeClass("slideInUp ani_05s").addClass("slideOutDown ani_05s dis_none");
                                                ele.find("#plug_location").removeClass("ak-is_active");
                                                if (toggle2) {
                                                    /*------------------------------------------高德地图API调用开始-----------------------------------------*/
                                                    $("#plug_allmap").html("");
                                                    setTimeout(function() {
                                                        var map = new AMap.Map("plug_allmap", {
                                                            resizeEnable: true,
                                                            center: [116.397428, 39.90923],//地图中心点
                                                            zoom: 13 //地图显示的缩放级别
                                                        });
                                                        var marker = new AMap.Marker({ //添加自定义点标记
                                                            map: map,
                                                            enableHighAccuracy: true,//是否使用高精度定位，默认:true
                                                            position: [116.397428, 39.90923], //基点位置
                                                            offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
                                                            draggable: true,  //是否可拖动
                                                            content: '<div class="marker-route marker-marker-bus-from"></div>'   //自定义点标记覆盖物内容
                                                        });
                                                    },1000);
                                                    /*------------------------------------------高德地图API调用结束-----------------------------------------*/
                                                }
                                            }
                                        });
                                    });
                                    //共享实时位置
                                    $(ele1[0].dom).find("#plug_livemap").bind("click", function (cc) {
                                        AKjs_Popupwin({
                                            dom: "#plug_mapWin", //弹窗内容的布局
                                            position: "bottom", //位置类型(top，bottom，left，right，middle)
                                            effectIn: "slideInUp ani_05s", //弹窗显示效果 (css动画库：akjs.animate.css)
                                            effectOut: "slideOutDown ani_05s", //弹窗消失效果 (css动画库：akjs.animate.css)
                                            hasMask: true, //是否开启遮罩层背景 (true / false)
                                            maskPosition: 8, //Mask的z-index数值
                                            closeBtn: ".plug_back", //关闭弹窗按钮的Class名
                                            OneButton: cc.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                                            toggleIcon: "", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                                            callback :function (ele2,toggle2) { //通过回调获取弹窗显示后的以上参数
                                                //console.log($(ele2[0].dom)); //获取当前的弹窗元素
                                                $(ele1[0].dom).removeClass("slideInUp ani_05s").addClass("slideOutDown ani_05s dis_none");
                                                ele.find("#plug_location").removeClass("ak-is_active");
                                                if (toggle2) {
                                                    /*------------------------------------------高德地图API调用开始-----------------------------------------*/
                                                    $("#plug_allmap").html("");
                                                    setTimeout(function() {
                                                        var map, geolocation;
                                                        //加载地图，调用浏览器定位服务
                                                        map = new AMap.Map('plug_allmap', {
                                                            resizeEnable: true
                                                        });
                                                        map.plugin('AMap.Geolocation', function() {
                                                            geolocation = new AMap.Geolocation({
                                                                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                                                                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                                                                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                                                                zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                                                                buttonPosition:'RB'
                                                            });
                                                            map.addControl(geolocation);
                                                            geolocation.getCurrentPosition();
                                                            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                                                            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
                                                        });
                                                        //解析定位结果
                                                        function onComplete(data) {
                                                            var str=['定位成功'];
                                                            str.push('经度：' + data.position.getLng());
                                                            str.push('纬度：' + data.position.getLat());
                                                            if(data.accuracy){
                                                                str.push('精度：' + data.accuracy + ' 米');
                                                            }//如为IP精确定位结果则没有精度信息
                                                            str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                                                        }
                                                        //解析定位错误信息
                                                        function onError(data) {
                                                        }
                                                    },500);
                                                    /*------------------------------------------高德地图API调用结束-----------------------------------------*/
                                                }
                                            }
                                        });
                                    });
                                }
                            }
                        });
                    });
                }
            }
        });
    });

</script>
<style type="text/css">
  /*样式覆盖区域*/
  .amap-logo, .amap-copyright {
    display: none !important;
  }
  .amap-marker .marker-route {
    position: absolute;
    width: 40px;
    height: 44px;
    color: #e90000;
    background: url(https://webapi.amap.com/theme/v1.3/images/newpc/poi-1.png) no-repeat;
    cursor: pointer;
  }
  .amap-marker .marker-marker-bus-from {
    background-position: -330px -18px;
  }
</style>
</html>